<template>
  <div>
    <ul class="menu">
      <li :class="{'menu-item-on': isMenu0}" @click="menu0">热门推荐</li>
      <li :class="{'menu-item-on': isMenu1}" @click="menu1">笔记本电脑</li>
      <li :class="{'menu-item-on': isMenu2}" @click="menu2">手机</li>
      <li>服饰</li>
      <li>手表</li>
      <li>书籍</li>
      <li>玩具</li>
      <li>小家电</li>
      <li>学习用品</li>
      <li>办公用品</li>
      <li>旅游必备</li>
      <li>游戏卡通</li>
    </ul>
  </div>
</template>
<script>

import Msg from "./Msg.js";

export default {
  data() {
    return {
      isMenu0: true,
      isMenu1: false,
      isMenu2: false,
    }
  },
  methods: {
    menu0() {
      Msg.$emit('key', '0')
      this.isMenu0 = true
      this.isMenu1 = false
      this.isMenu2 = false
    },
    menu1() {
      Msg.$emit('key', '1')
      this.isMenu0 = false
      this.isMenu1 = true
      this.isMenu2 = false
    },
    menu2() {
      Msg.$emit('key', '2')
      this.isMenu0 = false
      this.isMenu1 = false
      this.isMenu2 = true
    }
  }
}
</script>
<style>

  .menu li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    border-bottom: 2px solid #f5f5f5;
    background-color: white;
    cursor: pointer;
  }
  .menu-item-on {
    color: red
  }

</style>